<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邮箱检测</title>
<style>
.red{color:red};
.green{color:green};

<style>


<script>
/* 要求：xxxxxx@xxxxx.com/info/cn/org */
function fn(ele){
    return document.querySelector(ele);
}
window.onload=function(){
    var reg=/^(\d+)(@)[a-zA-Z0-9]+(\.)[a-zA-Z]{2,}$/

fn('.txt').addEventListener('keyup',function(){
    if(reg.text(this.value)){
        fn('.text').innerText="输入正确"
        fn('.text').className="text green"
    }else{
        fn('.text').innerText="请输入正确的邮箱格式！"
        fn('.text').className="text red"
        }
    },false);
}

</script>
</head>
<body>
 
  <input type="text" class="txt"><span class="text"></span>  

</body>
</html>